<template>
  <div class="toolList">
    <li 
    v-for="(item, index) in toolList" 
    :key="index"
    @click = "clickColor(index,item.path)"
    :class="item.flag===true?'changeColor':''"
    >
      {{ item.name }}
    </li>
  </div>
</template>

<script>
export default {
  data() {
    return {
      toolList: [
        {
          id: 1,
          name: "一句诗词",
          path: "/poem",
          flag:true
        },
        {
          id: 2,
          name: "毒鸡汤",
          path: '/soup',
          flag:false
        },
        {
          id: 3,
          name: "励志句子",
          path: '/sentence',
          flag:false
        }
      ],
    };
  },
  methods: {
      clickColor(i,path){
          this.toolList.map(item=>item.flag = false)
          this.toolList[i].flag = !this.toolList[i].flag;
          this.$router.push(path)
      }
  },
};
</script>

<style lang="scss" scoped>
.toolList {
  text-align: center;
}
li {
  list-style: none;
  padding: 0.2rem 0;
  color: #b8b8b8;
  cursor: pointer;
  font-weight: 400;
  line-height: 1.6;
}
li:hover{
    color: #4caf50;
}
.changeColor{
    color: #4caf50;
}
</style>